import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity, Modal} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import Attachment from './attachment'
import styles, {GREY} from '../../config/styles'
import AudioSelector from '../common/audio_selector'
import ImageSelector from '../common/image_selector'
import VideoSelector from '../common/video_selector'
import {Aws3UploadApi} from '../../config/api'

class AttachmentManagerPro extends Component {
    static defaultProps = {
        attachments: [],
        onFinishedUpload: undefined
    }

    state = {
        modalVisible: false
    }

    _get_name = () => {
        let date = new Date()
        let name = date.getTime().toString()
        name = name.substr(name.length - 6, 6)
        return name
    }

    finishedAudioRecord = (filePath) => {
        let name = this._get_name()
         Aws3UploadApi(`${name}.aac`, filePath, 'audio/aac').then((result) => {
            this.props.onFinishedUpload(name, 'audio', result.awsPath)
         })
         this.setState({modalVisible: false})
     }
 
    finishedImageSelect = (filePath) => {
        let name = this._get_name()
        Aws3UploadApi(`${name}.jpeg`, filePath, 'image/jpeg').then((result) => {
            this.props.onFinishedUpload(name, 'image', result.awsPath)
        })
        this.setState({modalVisible: false})
    }

    finishedVideoSelect = (filePath) => {
        let name = this._get_name()
        Aws3UploadApi(`${name}.mp4`, filePath, 'video/mp4').then((result) => {
            this.props.onFinishedUpload(name, 'video', result.awsPath)
        })
        this.setState({modalVisible: false})
    }

    closeModal = () => {
        this.setState({modalVisible: false})
    }

    itemModalTemplate = () => {
        return (
            <Modal
                animationType={'slide'}
                visible={this.state.modalVisible}
                transparent={true}
                onRequestClose={() => {}}                
            >
                <TouchableOpacity
                    style={{flex: 1, flexDirection: 'column-reverse'}}
                    onPress={() => {this.closeModal()}}
                >
                    <View style={{height: 100, backgroundColor: 'white', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
                        <ImageSelector style={{flex: 1}} onFinished={(filePath) => {this.finishedImageSelect(filePath)}} />
                        <AudioSelector style={{flex: 1}} onFinished={(filePath) => {this.finishedAudioRecord(filePath)}} />
                        <VideoSelector style={{flex: 1}} onFinished={(filePath) => {this.finishedVideoSelect(filePath)}} />
                    </View>
                    <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0)'}} />
                </TouchableOpacity>
            </Modal>
        )
    }

    render () {
        const {attachments, onFinishedUpload} = this.props
        return (
            <ScrollView horizontal={true} style={{padding: 10}} >
                {
                    onFinishedUpload == undefined ? null : (  
                    <TouchableOpacity style={styles.attachmet_add_button} onPress={() => this.setState({modalVisible: true})}> 
                        <Icon name={'md-add'} size={32} color={GREY} />
                    </TouchableOpacity>)
                }
                {
                    attachments.map((attachment, index) => {
                        return <Attachment 
                                    attachment={attachment}
                                    key={index} 
                                />
                    })
                }
                {this.itemModalTemplate()}
            </ScrollView>
        )
    }
}

export default AttachmentManagerPro